<template>
    <div id="promotionDetail" class="wrap_common">
        <div class="promotion_wrap">
            <div class="promotion_banner">
                <img :src="data.banner" alt="活动图片" />
            </div>
            <div class="promotion_contant">
                <div class="title_wrap">
                    <div class="title_body">
                        <!-- <div class="title_tag">
                            <img :src="data.icon" alt>
                        </div>-->
                        <div class="title_tag">{{ data.promotion_cat_name || '暂无' }}</div>
                        <div class="title_text">{{ data.title }}</div>
                    </div>
                    <div class="title_time">活动时间：{{ data.start_date }}~{{ data.end_date }}</div>
                    <div class="title_summary">{{ data.summary }}</div>
                </div>
                <div class="contant_wrap">
                    <div class="content_title">活动详情</div>
                    <div class="content_body">{{ data.content }}</div>
                </div>
                <div class="user_wrap">
                    <div class="user_attr_body">
                        <img class="user_attr" :src="userInfo.owner_user_picture" alt />
                        <img class="user_mark" :src="constant.imgUrl + 'common/personal-authenticate.png'" alt />
                    </div>
                    <div class="user_info">
                        <div class="user_name ellipsis_line_com">{{ userInfo.owner_user_name }}</div>
                        <div class="service_text">
                            <span class="yellow_text">已服务{{ userInfo.owner_service_num }}名业主</span>
                            <span class="separate_text">|</span>
                            <span>{{ userInfo.owner_working_years }}年从业经验</span>
                        </div>
                        <div class="mark_list_body">
                            <div class="mark_list">风水测试</div>
                            <div class="mark_list">免费报价</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer v-if="!data.is_expire">
            <div class="footer_wrap">
                <div class="poster_btn">
                    <v-getPhoneNumber @cbFn="goShare" dataSource="活动海报">
                        <span>生成海报</span>
                    </v-getPhoneNumber>
                </div>
                <div class="register_now">
                    <v-getPhoneNumber @cbFn="registerNowBtn" dataSource="活动海报">
                        <span>立即报名</span>
                    </v-getPhoneNumber>
                </div>
            </div>
        </footer>
        <v-sharePoster ref="sharePoster" :type="7"></v-sharePoster>
        <v-registerNow ref="registerNow"></v-registerNow>
    </div>
</template>
<script>
import SharePoster from '@/pages/components/sharePoster'
import RegisterNow from '@/pages/components/registerNow'
import { getDetail } from '@/api/promotion'
import getPhoneNumber from '@/pages/components/getPhoneNumber'
export default {
	name: 'promotionDetail',
	components: {
		'v-sharePoster': SharePoster,
		'v-registerNow': RegisterNow,
		'v-getPhoneNumber': getPhoneNumber
	},
	data() {
		return {
			constant: this.$constant,
			data: {
				is_expire: false
			},
			userInfo: '',
			promotionId: ''
		}
	},
	onLoad(options) {
		console.log(options)
		this.promotionId = options.promotion_id
		this._getDetail()
	},
	mounted() {},
	methods: {
		_getDetail() {
			let params = {
				promotion_id: this.promotionId
			}
			getDetail(params).then(res => {
				if (res.status === 'success') {
					this.data = res.data.promotion_info
					this.userInfo = res.data.owner_user_info
				} else {
					this.$toast(res.errors.message)
				}
			})
		},
		goShare() {
			this.$refs.sharePoster.showMask(this.promotionId)
		},
		registerNowBtn() {
			this.$refs.registerNow.showMask()
		}
	}
}
</script>

<style lang="scss">
#promotionDetail {
    padding-bottom: 100px;
    .promotion_wrap {
        background-color: #fff;
        .promotion_banner {
            width: 100%;
            height: 250px;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .promotion_contant {
            padding: 0 36px;
            .title_wrap {
                padding: 30px 0 40px;
                border-bottom: 1px solid #ddd; /*no*/
                & > div {
                    margin: 18px 0;
                }
                .title_body {
                    display: flex;
                    align-items: center;
                    .title_tag {
                        // width: 60px;
                        padding: 2px 12px 0;
                        height: 36px;
                        line-height: 36px;
                        text-align: center;
                        margin-right: 20px;
                        border-radius: 8px;
                        color: #ff6900;
                        border: 1px solid #ff6900; /*no*/
                        flex-shrink: 0;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .title_text {
                        width: calc(100% - 100px);
                        font-size: 38px;
                        font-weight: bold;
                    }
                }
                .title_time {
                    color: #999;
                }
                .title_summary {
                    color: #ff6900;
                }
            }
            .contant_wrap {
                padding: 40px 0;
                border-bottom: 1px solid #ddd; /*no*/
                .content_title {
                    font-size: 34px;
                    margin-bottom: 30px;
                }
                .content_body {
                    font-size: 30px;
                    color: #666;
                }
            }

            .user_wrap {
                display: flex;
                align-items: center;
                text-align: left;
                padding: 40px 0 50px;
                .user_attr_body {
                    position: relative;
                    width: 120px;
                    height: 120px;
                    background-color: #eee;
                    border-radius: 50%;
                    .user_attr {
                        width: 120px;
                        height: 120px;
                        border-radius: 50%;
                    }
                    .user_mark {
                        width: 110px;
                        height: 34px;
                        position: absolute;
                        left: 5px;
                        bottom: -12px;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                .user_info {
                    margin-left: 30px;
                    & > div {
                        margin-top: 12px;
                    }
                    .mark_list_body {
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        .mark_list {
                            font-size: 24px;
                            color: #999;
                            padding: 4px 10px;
                            border: 2px solid #ddd;
                            border-radius: 4px;
                            margin-right: 10px;
                        }
                    }
                    .user_name {
                        font-size: 36px;
                        font-weight: 600;
                    }
                    .service_text {
                        font-size: 24px;
                        color: #666;
                        .yellow_text {
                            color: #ee6501;
                        }
                    }
                }
            }
        }
    }
    .separate_text {
        margin: 0 8px;
    }
    .footer_wrap {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 32px;
        & > div {
            width: 40%;
            height: 100%;
            line-height: 100px;
        }
        .register_now {
            width: 60%;
            background-color: #ffd11a;
        }
    }
}
</style>
